<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { nameFilter } from '@/utils/public';
  import portrait from '@/components/portrait.vue';
  const props = defineProps({
    floorType:{
      type:Number,
      default:0
    },
    level:{
      type:Number,
      default:0,
    },
    userlist:{
      type:Array<any>,
      default:()=>[]
    }
  })
  onMounted(()=>{

  })
</script>
<template>
  <div class="floorUserInfo"
    :style="{
    '--floorInfoBack':floorType?'var(--floorUserBack)':'var(--floorUserSpecialBack)'
    }">
    <div class="floorNum">{{ level }}层</div>
    <div class="userinfoList flex-align-center">
      <div v-for="user in userlist" class="userinfo">
        <portrait :image="user.portrait" />
        <div class="nickName">{{ nameFilter(user.nickname,4) }}</div>
      </div>
    </div>
    
  </div>
</template>

<style lang='scss' scoped>
  .floorUserInfo {
    position: relative;
    width: 100%;
    height: 108px;
    background: var(--floorInfoBack);
    .floorNum {
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--floorNumFontColor);
      font-weight: 600;
      font-size: 16px;
      line-height: 16px;
    }
    .userinfoList {
      padding: 18px 0 0;
      .userinfo:nth-child(1) {
        margin-right: 103px;
      }
      .userinfo {
        :deep(.portrait) {
          margin-bottom: 6px;
          background: var(--floorUserPortraitColor);
          .imgBorder {
            background: var(--floorPortraitBorderColor);
          }
          .noIcon {
            background: var(--floorCoveringImage);
          }
        }
        .nickName {
          color: var(--floorUserNickNameColor);
          font-weight: 500;
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }
</style>